﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局样式 */
        .container {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .beijing-image {
            width: 100%;
            height: 100vh;
            position: absolute;
            z-index: -1;
            object-fit: cover;
        }

        /* 导航栏样式 */
        .nav-bar {
            width: 100%;
            height: 88px; /* 原 88rpx */
            display: flex;
            align-items: center;
            padding: 0 30px; /* 原 30rpx */
            position: absolute;
            top: 70px; /* 原 70rpx */
        }
        
        .back-btn {
            margin-right: 10px; /* 原 10rpx */
        }
        
        .back-icon {
            width: 50px; /* 原 50rpx */
            height: 50px; /* 原 50rpx */
            object-fit: cover;
        }
        
        .nav-title {
            width: 80px; /* 原 80rpx */
            height: 50px; /* 原 50rpx */
            margin-left: 10px; /* 原 10rpx */
            margin-top: -10px; /* 原 -10rpx */
            object-fit: cover;
        }

        /* 图片区域样式 */
        .image-container {
            width: 100%;
            height: 425px; /* 原 850rpx (根据屏幕宽度调整) */
            overflow: hidden;
            margin-top: 85px; /* 原 170rpx */
            position: relative;
            z-index: 0;
        }

        .main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 控制按钮区域样式 */
        .control-container {
            width: 100%;
            height: 300px; /* 原 600rpx (根据屏幕宽度调整) */
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 10px; /* 原 10rpx */
            z-index: 1;
        }

        .control-buttons {
            width: 250px; /* 原 500rpx */
            height: 250px; /* 原 500rpx */
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .yuanwai-image {
            width: 250px; /* 原 500rpx */
            height: 250px; /* 原 500rpx */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            object-fit: cover;
        }

        .yuannei-image {
            width: 200px; /* 原 400rpx */
            height: 200px; /* 原 400rpx */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            object-fit: cover;
        }

        .up-btn {
            width: 40px; /* 原 80rpx */
            height: 40px; /* 原 80rpx */
            position: absolute;
            top: 25px; /* 原 50rpx */
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            object-fit: cover;
        }

        .left-btn {
            width: 40px; /* 原 80rpx */
            height: 40px; /* 原 80rpx */
            position: absolute;
            left: 25px; /* 原 50rpx */
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            object-fit: cover;
        }

        .mic-btn {
            width: 95px; /* 原 190rpx */
            height: 95px; /* 原 190rpx */
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 11;
            object-fit: cover;
        }

        .luyin-btn {
            width: 60px; /* 原 120rpx */
            height: 60px; /* 原 120rpx */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 12;
            object-fit: cover;
        }

        .right-btn {
            width: 40px; /* 原 80rpx */
            height: 40px; /* 原 80rpx */
            position: absolute;
            right: 25px; /* 原 50rpx */
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            object-fit: cover;
        }

        .down-btn {
            width: 40px; /* 原 80rpx */
            height: 40px; /* 原 80rpx */
            position: absolute;
            bottom: 25px; /* 原 50rpx */
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            object-fit: cover;
        }

        /* 根据屏幕宽度调整元素尺寸 */
        @media screen and (max-width: 320px) {
            .image-container {
                height: 340px; /* 原 850rpx -> 按比例缩小 */
            }
            .control-container {
                height: 240px; /* 原 600rpx -> 按比例缩小 */
            }
            .control-buttons {
                width: 200px; /* 原 500rpx -> 按比例缩小 */
                height: 200px; /* 原 500rpx -> 按比例缩小 */
            }
            .yuanwai-image {
                width: 200px; /* 原 500rpx -> 按比例缩小 */
                height: 200px; /* 原 500rpx -> 按比例缩小 */
            }
            .yuannei-image {
                width: 160px; /* 原 400rpx -> 按比例缩小 */
                height: 160px; /* 原 400rpx -> 按比例缩小 */
            }
            .mic-btn {
                width: 76px; /* 原 190rpx -> 按比例缩小 */
                height: 76px; /* 原 190rpx -> 按比例缩小 */
            }
            .luyin-btn {
                width: 48px; /* 原 120rpx -> 按比例缩小 */
                height: 48px; /* 原 120rpx -> 按比例缩小 */
            }
        }

        @media screen and (min-width: 375px) and (max-width: 414px) {
            .image-container {
                height: 425px; /* 原 850rpx -> 按比例调整 */
            }
            .control-container {
                height: 300px; /* 原 600rpx -> 按比例调整 */
            }
            .control-buttons {
                width: 250px; /* 原 500rpx -> 按比例调整 */
                height: 250px; /* 原 500rpx -> 按比例调整 */
            }
            .yuanwai-image {
                width: 250px; /* 原 500rpx -> 按比例调整 */
                height: 250px; /* 原 500rpx -> 按比例调整 */
            }
            .yuannei-image {
                width: 200px; /* 原 400rpx -> 按比例调整 */
                height: 200px; /* 原 400rpx -> 按比例调整 */
            }
            .mic-btn {
                width: 95px; /* 原 190rpx -> 按比例调整 */
                height: 95px; /* 原 190rpx -> 按比例调整 */
            }
            .luyin-btn {
                width: 60px; /* 原 120rpx -> 按比例调整 */
                height: 60px; /* 原 120rpx -> 按比例调整 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="beijing-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/视频.png" alt="背景">
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="back-btn">
                <img class="back-icon" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/子女左.png" alt="返回">
            </div>
            <img class="nav-title" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/子女首页.png" alt="首页">
        </div>
        
        <!-- 图片区域 -->
        <div class="image-container">
            <img class="main-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/11.png" alt="主图">
        </div>
        
        <!-- 控制按钮区域 -->
        <div class="control-container">
            <div class="control-buttons">
                <img class="yuanwai-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/圆外.png" alt="圆外">
                <img class="yuannei-image" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/圆内.png" alt="圆内">
                <img class="up-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/上.png" alt="上">
                <img class="left-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/左角.png" alt="左">
                <img class="mic-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/椭圆 15.png" alt="麦克风">
                <img class="luyin-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/录音.png" alt="录音">
                <img class="right-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/右角.png" alt="右">
                <img class="down-btn" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/下.png" alt="下">
            </div>
        </div>
    </div>

    <script>
        // 如果需要添加交互功能，可以在这里添加 JavaScript 代码
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面已加载完成');
        });
    </script>
</body>
</html>